<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        >

<h:head>
    <title>Index</title>

    <h:outputScript library="js" name="jquery-1.9.1.min.js"></h:outputScript>
    <h:outputScript library="js" name="bootstrap.js"></h:outputScript>
    <h:outputScript library="js" name="loginmodal.js"></h:outputScript>

    <h:outputStylesheet library="css" name="common.css"/>
    <h:outputStylesheet library="css" name="typeface.css"/>
    <h:outputStylesheet library="css" name="bootstrap.css"/>
    <h:outputStylesheet library="css" name="login.css"/>
    <h:outputStylesheet library="css" name="navbar.css"/>

    <f:loadBundle basename="com.dataart.training.crimequalification.facesutils.messages"
                  var="msgs"></f:loadBundle>
    <f:loadBundle basename="com.dataart.training.crimequalification.facesutils.configurations"
                  var="conf"></f:loadBundle>

</h:head>

<f:view>

<h:body styleClass="body">

<h:inputHidden id="loginresult" value="#{loginBean.loginResult}"></h:inputHidden>
<h:inputHidden id="registrationresult" value="#{registrationBean.registrationResult}"></h:inputHidden>

<!-- Login Modal -->
<div id="loginModal" class="modal hide fade" tabindex="-1">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">x</button>
    <br/>
</div>
<div class="modal-body">

<div class="row">
    <div class="span8">

        <div class="row">

            <h:panelGroup styleClass="span3" id="loginPanel">
                <p class="text-success" style="font-size: 40px" id="myModalLabel">Sign In</p>
                <br/>
                <h:form id="loginForm" prependId="false">
                    <f:event type="preValidate" listener="#{loginBean.initiateLogin}"></f:event>

                    <div>
                        <h:message styleClass="errormessage"
                                   for="loginForm"></h:message>

                        <br/>
                        <br/>

                        <label for="j_username">
                            <h:outputText value="#{msgs['login.username']}:"/>
                            <br/>
                        </label>
                        <h:inputText label="Username" styleClass="span3 input-large" id="j_username"
                                     value="#{loginBean.username}"
                                     required="true"
                                     requiredMessage=" Please input your username">
                        </h:inputText>
                        <h:message styleClass="validationerror" for="j_username"/>

                        <br/>

                        <label for="j_password">
                            <h:outputText value="#{msgs['login.password']}:"/>
                            <br/>
                        </label>
                        <h:inputSecret label="Password" styleClass="span3 input-large" id="j_password"
                                       value="#{loginBean.password}"
                                       required="true"
                                       requiredMessage=" Please input your password">
                        </h:inputSecret>
                        <h:message styleClass="validationerror" for="j_password"/>

                        <br/>
                        <br/>

                        <p>
                            <h:commandButton styleClass="btn btn-large btn-success btnfont"
                                             value="#{msgs['login.signin']}"
                                             action="#{loginBean.doLogin}">
                            </h:commandButton>
                        </p>

                    </div>

                </h:form>
            </h:panelGroup>

            <h:panelGroup styleClass="span4 offset1" rendered="#{not registrationBean.registrationComplete}">
                <div style="background-color: #ffffff">

                    <h:panelGroup>

                        <p class="text-success" style="font-size: 40px" id="anotherModalLabel">Register</p>
                        <br/>

                        <h:form id="registerForm" prependId="false">
                            <f:event type="preValidate" listener="#{registrationBean.initiateRegistration}"></f:event>

                            <h:message styleClass="errormessage" for="registerForm"/>
                            <br/>
                            <br/>

                            <!--Username-->

                            <div class="control-group">

                                <label class="control-label" for="username">
                                    <h:outputText value="#{msgs['userinfo.username']}:"/>
                                    <br/>
                                </label>

                                <div class="controls">

                                    <h:inputText type="text" styleClass="input-xlarge" id="username"
                                                 value="#{registrationBean.username}"
                                                 required="true" requiredMessage="Please input desired username">
                                    </h:inputText>

                                    <p class="help-block"><h:message styleClass="validationerror" for="username"/>
                                    </p>
                                </div>
                            </div>

                            <!--Password-->

                            <div class="control-group">

                                <label class="control-label" for="name">
                                    <h:outputText value="#{msgs['userinfo.name']}:"/>
                                    <br/>
                                </label>

                                <div class="controls">
                                    <h:inputText styleClass="input input-xlarge" id="name"
                                                 value="#{registrationBean.name}"
                                                 required="true" requiredMessage="Please input your full name">
                                    </h:inputText>

                                    <p class="help-block"><h:message styleClass="validationerror" for="name"/></p>
                                </div>
                            </div>

                            <!--Email-->

                            <div class="control-group">
                                <label class="control-label" for="email">
                                    <h:outputText value="#{msgs['userinfo.email']}:"/>
                                    <br/> </label>

                                <div class="controls">
                                    <h:inputText styleClass="input-xlarge" id="email"
                                                 value="#{registrationBean.email}"
                                                 required="true" requiredMessage="Please provide your e-mail address">
                                    </h:inputText>

                                    <p class="help-block"><h:message styleClass="validationerror" for="email"/></p>
                                </div>
                            </div>

                            <!--Phone Number-->

                            <div class="control-group">
                                <label class="control-label" for="phonenumber">
                                    <h:outputText value="#{msgs['userinfo.telno']}:"/>
                                    <br/>
                                </label>

                                <div class="controls">
                                    <h:inputText styleClass="input-xlarge" id="phonenumber"
                                                 value="#{registrationBean.phoneNumber}"
                                                 required="true"
                                                 requiredMessage="Please provide your cell phone number">
                                        <f:validator validatorId="e164PhoneNumberValidator"/>
                                    </h:inputText>

                                    <p class="help-block"><h:message styleClass="validationerror"
                                                                     for="phonenumber"/>
                                    </p>

                                </div>
                            </div>

                            <!--Password-->

                            <div class="control-group">

                                <label class="control-label" for="password">
                                    <h:outputText value="#{msgs['userinfo.password']}:"/>
                                    <br/>
                                </label>

                                <div class="controls">
                                    <h:inputSecret styleClass="input-xlarge" id="password"
                                                   value="#{registrationBean.password}"
                                                   required="true" requiredMessage="Please input your password">
                                        <f:validateRegex
                                                pattern="#{passwordValidationBean.passwordValidationPattern}"/>
                                    </h:inputSecret>

                                    <p class="help-block"><h:message styleClass="validationerror" for="password"/>
                                    </p>

                                </div>
                            </div>

                            <div class="control-group">
                                <!-- Button -->
                                <div class="controls">
                                    <h:commandButton styleClass="btn btn-large btn-info btnfont" type="submit"
                                                     id="reg"
                                                     action="#{registrationBean.doRegister}"
                                                     value="#{msgs['register.register']}"/>
                                </div>
                            </div>

                            <br/>

                        </h:form>

                    </h:panelGroup>
                </div>

            </h:panelGroup>

        </div>
    </div>
</div>


</div>
</div>

<h:panelGroup id="navview">
    <ui:include src="/views/navbar.xhtml"/>
</h:panelGroup>

<h:panelGroup id="welcomePanel">

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">
                <ui:include src="sidebar.xhtml"/>
            </div>
            <div class="span10">
                <!-- Main unit -->
                <div class="container-full-index">

                    <h:panelGroup styleClass="row" id="greetingheader"
                                  rendered="#{loginBean.loggedIn}">
                        <div class="span12" style="color: #212121; padding: 40px 0 20px 120px;">

                            <p class="welcome-header">
                                Добро пожаловать, #{userDetailsBean.curUser.username}!</p>

                            <br/>
                            <br/>

                            <div class="row">
                                <h:panelGroup rendered="#{loginBean.loggedIn}">
                                    <br/>
                                    <br/>

                                    <div class="span3">
                                        <h:form id="userdetails" prependId="false">
                                            <div class="span8">
                                                <p class="white-text userdetails-username">
                                                    #{userDetailsBean.curUser.username}</p>

                                                <p class="userdetails-name">#{userDetailsBean.curUser.name}</p>
                                                <br/>

                                                <p>E-mail: <strong>#{userDetailsBean.curUser.email}</strong></p>

                                                <!--<p>Phone number: <strong>#{userDetailsBean.curUser.phoneNumber}</strong>-->
                                                <!--</p>-->
                                                <br/>

                                                <h:outputLink styleClass="btn btn-large btn-warning btnfont"
                                                              value="#{request.contextPath}/views/edituserinfo.xhtml">
                                                    Изменить »
                                                </h:outputLink>
                                            </div>
                                        </h:form>
                                    </div>

                                </h:panelGroup>
                            </div>

                        </div>


                    </h:panelGroup>

                </div>

            </div>
        </div>
    </div>

    <h:panelGroup id="nonsignedinheader"
                  rendered="#{!loginBean.loggedIn}">

        <div class="container">
            <div style="color: #212121; padding-top: 140px">

                <div class="pagination-centered text-center">

                    <p style="font-size: 40px; ">
                        Добро пожаловать в систему обучения
                        <br/>
                        <br/>
                        решению квалификационных задач!
                    </p>

                    <br/>
                    <br/>

                    <!-- Button to trigger login and signup modal -->
                    <a style="padding: 22px 29px" id="loginbtn" href="#loginModal" role="button"
                       class="btn btn-success btnfont btn-large"
                       data-toggle="modal">Войти или зарегистрироваться</a>

                    <br/>
                    <br/>

                </div>

            </div>
        </div>
    </h:panelGroup>
</h:panelGroup>


</h:body>

</f:view>

</html>
